<template>
  <div class="form_wrap">
    <el-button type="danger" icon="el-icon-close" @click="remoteCate" plain class="del" v-if="!disabledByCateId">删除分类</el-button>
    <div class="form_item">
      <span class="label">分类名称</span>
      <el-input v-model.trim="form.name" placeholder="请输入分类名称" @blur="keyEdit('name', '分类名称')" :disabled="disabledByCateId"></el-input>
    </div>
    <div class="form_item">
      <span class="label">上级分类</span>
      <el-cascader :disabled="disabledByCateId" ref="parentIdCascader" :value="form.parentId" :options="classifyList" :props="{ checkStrictly: true, value: 'id', label:'name', children:'children' }" @change="parentIdChange" style="width:590px"></el-cascader>
    </div>
    <div class="form_item">
      <span class="label">应用系统</span>
      <div class="sys_list">
        <p v-if="!childList.length" style="line-height:1.2">无</p>
        <div v-else class="sys" v-for="item in childList" :key="item.id">
          <span>
            <el-image :src="item.icon" style="width:100%;height:100%">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </span>
          <p>{{item.name}}</p>
        </div>

      </div>
    </div>
    <div class="form_item" style="width:650px"><span>创建人：{{form.creator}} </span><span style="margin-left:30px">创建时间：{{form.createTime | moment('YYYY-MM-DD HH:mm:ss')}}</span></div>
  </div>
</template>
<script>
// import {cryptoJSDecrypt} from '@/tools/utils'
import {getClassCategoryGET, updateClassCategoryPUT, getAppAllByClassIdPOST, delClassCategoryDELETE} from '@api/systemManage'
import icon from '../components/icon'
export default {
  components: {icon},
  props: {
    classifyList: Array
  },
  data () {
    return {
      showIcon: false,
      // 应用
      form: {
        createTime: '2019-11-05T17:39:12',
        creator: null,
        deleted: '0',
        enabled: true,
        id: 2,
        modifier: 'string',
        modifyTime: null,
        name: '一级目录',
        parentId: 1,
        sort: 0
      },
      childList: [],
      // menuId
      cateId: null
    }
  },
  computed: {
    disabledByCateId () {
      return Number(this.cateId) === 10 || Number(this.cateId) === 11 // 大厅不能被修改
    }
  },
  watch: {
    // 根据menuId获取分类详情
    $route () {
      this.cateId = this.$route.query.id
      console.log('classify query', this.cateId)
      if (!this.cateId) return
      this.getDetails(this.cateId)
    }
  },
  created () {
    this.cateId = this.$route.query.id
    if (this.cateId) this.getDetails()
  },
  methods: {
    // 查询分类详情
    getDetails (id = this.cateId) {
      getClassCategoryGET(id).then(res => {
        if (res.status) {
          this.form = res.data
          this.form.cateId = res.data.parentId
        }
      })
      getAppAllByClassIdPOST({
        'categoryId': id
      }).then(res => {
        if (res.status) {
          this.childList = res.data
        }
      })
    },
    // 删除分类
    remoteCate () {
      if (!this.cateId) return
      this.$confirm('确认删除该分类?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        delClassCategoryDELETE(this.cateId).then(res => {
          if (res.status) {
            this.cateId = null
            this.form = {}
            this.$emit('delCateOrApp')
          }
        })
      })
    },
    // 编辑
    keyEdit (key, keyName) {
      if (!this.cateId) return
      if (!this.form[key]) {
        this.$message.error(`${keyName}不能为空`)
        return false
      }
      updateClassCategoryPUT(this.form.id, this.form).then(res => {
        if (res.status) {
          this.$emit('refreshCates')
        }
      })
    },
    // 分类变化
    parentIdChange (value) {
      let checkedNodes = this.$refs.parentIdCascader.getCheckedNodes()
      if (checkedNodes.length > 0) {
        this.form.parentId = checkedNodes[0].data.id
        this.form.menuId = this.cateId
        this.keyEdit('parentId', '应用分类')
      }
    }
  }
}
</script>
<style lang="less" scoped>
@import "../../../../../assets/variate.less";
.del {
  position: absolute;
  top: 20px;
  right: 30px;
}
.form_wrap {
  padding: 70px 0;
  box-sizing: border-box;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  .form_item {
    display: flex;
    line-height: 36px;
    margin-bottom: 20px;
    color: #666666;
    font-size: 14px;
    .label {
      margin-right: 10px;
      width: 80px;
      text-align: right;
    }
    /deep/.el-input,
    /deep/.el-select,
    .sys_list {
      width: 590px;
    }
  }
  .sys_list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 0 20px;
    box-sizing: border-box;
    .sys {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-right: 50px;
      margin-bottom: 30px;
      font-size: 12px;
      span {
        width: 48px;
        height: 48px;
        line-height: 48px;
        text-align: center;
        border-radius: 50%;
        img {
          width: 100%;
          height: 100%;
          vertical-align: middle;
          font-size: 24px;
          color: #fff;
        }
      }
    }
  }
}
</style>
